<!-- 通知公告栏 -->
<template>
  <el-tabs v-model="tab" class="tabs-content">
    <el-tab-pane label="通知中心" v-loading="!noticeList.length && noticeLoading" key="notice">
      <template v-if="noticeList.length">
        <el-carousel height="246px">
          <el-carousel-item v-for="item in noticeList.slice(0, 3)" :key="item">
            <el-image style="width: 100%; height: 100%" :src="item.iconUrl" fit="cover" />
          </el-carousel-item>
        </el-carousel>
        <view
          class="overflow-hidden flex flex-col gap-row-12px overflow-y-overlay max-h-246px w100%"
          key="noticeList"
        >
          <messageItem
            :item="notice"
            v-for="(notice, index) in noticeList"
            :key="'notice' + notice.id"
            :index="index + 1"
            :category-fn="getCategoryNotice"
            @click="handleClickNotice(notice)"
          />

          <ReachBottom
            class="mt--12px"
            @on-reach-bottom="handleReachBottomNotice"
            :loading="noticeLoading"
          />
        </view>
      </template>
      <el-empty v-else class="!p10px m-auto" description="暂无数据" />
    </el-tab-pane>
    <el-tab-pane label="公告中心" v-loading="!newsList.length && newsLoading" key="news">
      <template v-if="newsList.length">
        <el-carousel>
          <el-carousel-item v-for="item in newsList.slice(0, 3)" :key="item">
            <el-image style="width: 100%; height: 100%" :src="item.iconUrl" fit="cover" />
          </el-carousel-item>
        </el-carousel>
        <view
          class="overflow-hidden flex flex-col gap-row-12px overflow-y-overlay max-h-246px w100%"
          key="newsList"
        >
          <messageItem
            titleKey="newsTitle"
            contentKey="newsContent"
            :item="news"
            v-for="(news, index) in newsList"
            :key="'news' + news.id"
            :index="index + 1"
            :category-fn="getCategoryNews"
            @click="handleClickNews(news)"
          />
          <ReachBottom
            class="mt--12px"
            @on-reach-bottom="handleReachBottomNews"
            :loading="newsLoading"
          />
        </view>
      </template>
      <el-empty v-else class="!p10px m-auto" description="暂无数据" />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import messageItem from '../messageItem.vue'
import { useNotice } from './hooks/useNotice'
import { useNews } from './hooks/useNews'

const tab = ref('0')
const toast = useMessage()
const list = ref([])
const {
  noticeList,
  queryParams: noticeParams,
  loading: noticeLoading,
  loadmoreState: noticeLoadmoreState,
  handleClickNotice,
  getNoticeList,
  handleReachBottom: handleReachBottomNotice,
  getCategory: getCategoryNotice
}: any = useNotice({
  toast
})
const {
  newsList,
  queryParams: newsParams,
  loading: newsLoading,
  loadmoreState: newsLoadmoreState,
  handleClickNews,
  getNewsList,
  handleReachBottom: handleReachBottomNews,
  getCategory: getCategoryNews
}: any = useNews({ toast })

const baseListMap: any = computed(() => {
  console.log(noticeList.value, '---noticeList.value1')
  const baseMap = [
    {
      list: noticeList.value,
      queryParams: noticeParams,
      getList: getNoticeList,
      handleReachBottom: handleReachBottomNotice
    },
    {
      list: newsList.value,
      queryParams: newsParams,
      getList: getNewsList,
      handleReachBottom: handleReachBottomNews
    }
  ]
  return baseMap[tab.value]
})
watch(
  () => tab.value,
  () => {
    baseListMap.value?.getList(true)
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.tabs-content {
  :deep() {
    .el-tab-pane {
      display: flex;
      gap: 20px;
    }

    .el-tabs__header {
      margin-bottom: 13px;
    }

    .el-carousel {
      flex-shrink: 0;
      width: 500px;
      height: 246px;
      border-radius: 10px;
    }
  }
}
</style>
